<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
    #img{
      width: 100%;
      /* height: 500px; */
    }
    * {
  padding: 0;
  margin: 0;
}
.hot_div {
  border: 1px dashed blue;
  background: #5a72f8;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0.1;
  z-index: 9;
}
#map-list{
  position: absolute;
  top:0;
  z-index: 100;
  background: #fff;
  cursor: pointer;
}
#maparea{
  position: relative;
  z-index: 10;
}
  </style>
</head>
<body>
  <ul id="map-list"></ul>
  <img id="img" src="../img/1.jpg" border="0" usemap="#planetmap" alt="Planets" />
  <div id="maparea"></div>
  <script>
    var pointList = []; // 记录所有矩形坐标
    window.onload = function() {
      document.onmousedown = function(e) {
        if (status) {
          return;
        }
        // 按下鼠标，我们得到起点位置
        var posx = e.clientX;
        var posy = e.clientY;

        // 我们创建一个hot_div来观察框选区域
        var div = document.createElement("div");
        div.className = "hot_div";
        div.id = "hot_div" + pointList.length;
        div.style.left = e.clientX + "px";
        div.style.top = e.clientY + "px";
        document.body.appendChild(div)

        document.onmousemove = function(ev) {
          // 移动时监听鼠标位置，向hot_div添加left,top,width,height
          div.style.left = Math.min(ev.clientX, posx) + "px";
          div.style.top = Math.min(ev.clientY, posy) + "px";
          // Math.abs是取绝对值
          div.style.width = Math.abs(posx - ev.clientX) + "px";
          div.style.height = Math.abs(posy - ev.clientY) + "px";
          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }

        // 记录矩形坐标
        document.onmouseup = function() {
        // 选择区域后移除div(不删除点击不了，点击都在这个div上面)
        div.parentNode.removeChild(div);
        // left,top构成左上角坐标点，left+width,top+height构成右下角坐标点
        var point = {
            x1: parseInt(div.style.left),
            y1: parseInt(div.style.top),
            x2: parseInt(div.style.left) + parseInt(div.style.width),
            y2: parseInt(div.style.top) + parseInt(div.style.height),
            host: 'http://www.baidu.com'
        }
        // 都记录存起来
        pointList.push(point);
        // 创建map
        createMap();
        document.onmousemove = null;
        document.onmouseup = null;
      }
      }
    }

    // 生成map
    function createMap(){
      var li = '';
      var areaTpl = '';
      // 遍历生成模板
      pointList.forEach((item, index)=> {
          // li主要是生成一个list，用来管理map的
          // 可以操作修改链接和删除
          li += '<li class="pointli" data-index="'+index+'"> '+
          '我是第'+index+'个热区('+(item.host)+'), 点击修改链接 '+
          '<span class="delPoint" data-index="'+index+'">删除</span></li>';

          // map area模板
          areaTpl += '<area '+
          'shape="rectangle" '+
          'coords="'+item.x1+','+item.y1+','+item.x2+','+item.y2+'" '+
          'href ="'+(item.host)+'" '+
          'target ="_blank" '+
          'alt="web秀" />';
      })
      // 模板添加到网页中（map和area要同时添加）
      $('#map-list').html(li);
      $('#maparea').html('<map name="planetmap" id="planetmap">'+areaTpl+'</map>');
    }

    // 简单“删除”点击事件
    $(document).on('click', '.delPoint', function(e){
      // status状态主要是用来阻止鼠标按下事件的
      status = true;
      document.onmousemove = null;
      document.onmouseup = null;
      // 获取下标
      var index = $(this).data('index');
      // 删除数组某个对象
      pointList.splice(index, 1);
      // 重新生成map
      createMap();
      // 1s后状态重置
      setTimeout(function(){
          status = false;
      }, 1000)
      return false;
    })
  </script>
</body>
</html>